<template>
  <div>
    <h1>父组件</h1>
    <h3>我有{{ sum }}辆车</h3>
    <h3 v-show="isShow">孩子给了我一个{{ toy }}</h3>
    <button @click="give">给孩子一辆车</button>
    <button @click="na">拿回一辆车</button>
    <Child :sendFather="getMain" :carSum="giveSum" />
  </div>
  
</template>

<script setup lang='ts' name="Father">
import { ref, reactive } from 'vue'

import Child from './Child.vue';

let sum = ref(10)
let isShow = ref(false)
let toy = ref("")
let giveSum = ref(0)

function getMain(val:string){
    toy.value = val
    isShow.value = true;
}
function give(){
    giveSum.value++;
    sum.value--;
}
function na(){
    giveSum.value--;
    sum.value++;
}

</script>


<style lang='scss' scoped>

</style>